<!--  -->
<template>
  <div v-if="model" class="editViews">
      <div style="margin-bottom:10px"><navBar :Userinfo="model"></navBar></div>
      <div class="uploadfile">
          <van-uploader class="uploadimg" :after-read="afterRead" preview-size="100vw" />
          <editBanner left="头像">
          <img :src="model.user_img" slot="right" v-if="model.user_img"/>
           <img src="@/assets/default_img.jpg" slot="right" v-else/>
          </editBanner>
      </div>
      <editBanner left="昵称" @bannerClick="show=true">
          <a href="javascript:;" slot="right">{{model.name}}</a>
      </editBanner>
      <editBanner left="UID">
          <a href="javascript:;" slot="right">{{model.username}}</a>
      </editBanner>
      <editBanner left="性别" @bannerClick="gendershow = true">
           <a href="javascript:;" slot="right">{{model.gender ? '男' : '女'}}</a>
      </editBanner>
      <editBanner left="出生日期"></editBanner>
      <editBanner left="个性签名" @bannerClick="textshow=true">
           <a href="javascript:;" slot="right">{{model.user_desc}}</a>
      </editBanner>
        <div class="editback" @click="$router.back()">返回个人中心</div>
      <van-dialog v-model="show" 
      title="昵称" 
      show-cancel-button 
      @confirm="confirmClick"
      @cancel="content = ''"
      >
          <van-field v-model="content"  autofocus />
      </van-dialog>

      <van-dialog 
         v-model="textshow"
         title="个性签名"
         show-cancel-button
         @confirm="textareaClick"
         @cancel="content = ''"
      >
          <van-field v-model="content" type="textarea" autofocus />
      </van-dialog>
     <van-action-sheet v-model="gendershow" cancel-text="取消" :actions="actions" @select="onSelect" />
  </div>

</template>

<script>
import navBar from '@/components/navBar' 
import editBanner from '@/components/editBanner' 
export default {
    name:'Edit',
  data () {
    return {
        model:{},
        show:false,
        content:'',
        textshow:false,
        gendershow:false,
        actions: [
                { name: '男',val:1 },
                { name: '女',val:0 },
        ],
    };
  },

  components: {
      navBar,
      editBanner
  },
  methods: {
      async selectUser(){
           const res=await this.$http.get('/user/'+localStorage.getItem('id'),{
            
          })
          this.model=res.data[0]
      },
      async afterRead(file) {
           const fromdata = new FormData()
           fromdata.append('file',file.file)
           const res =  await this.$http.post('/upload',fromdata)
           this.model.user_img = res.data.url
           this.Userupdate();
       },
      async Userupdate(){
            const res = await this.$http.post('/update/' + localStorage.getItem('id'),this.model);
            if(res.data.code == 200){
               this.$msg.fail('修改成功')
           } 
       },
        confirmClick() {
           this.model.name =  this.content
           this.Userupdate()
           this.content = ''
       },
        textareaClick() {
           this.model.user_desc = this.content
           this.Userupdate()
           this.content = ''
       },
        onSelect(data) {
           this.model.gender = data.val
           this.Userupdate()
           this.gendershow = false
       }
  },
  mounted(){
      this.selectUser();
  },

 
}

</script>
<style  scoped>
.editViews a{
    color:#333
}
.editViews img{
    height: 12.778vw;
    width: 12.778vw;
    border-radius: 50%;
}
.uploadfile{
    position: relative;
    overflow: hidden;
}
.uploadfile .uploadimg{
    opacity: 0;
    position: absolute;
}
.editback{
    margin-top: 5.556vw;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    color: #999;
    padding: 4.167vw 0;
    font-size: 4vw;
}
</style>